<template>
  <div class="app-container">
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">基本信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="8" class="table-cell-title">姓名</el-col>
        <el-col :span="8" class="table-cell-title">手机号</el-col>
        <el-col :span="8" class="table-cell-title">城市信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell">{{ course.name }}</el-col>
        <el-col :span="8" class="table-cell">{{ course.phone }}</el-col>
        <el-col :span="8" class="table-cell">{{ course | setAdrInfo }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell-title">身份证</el-col>
        <el-col :span="8" class="table-cell-title">昵称</el-col>
        <el-col :span="8" class="table-cell-title">社区名称</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell">{{ course.idCard }}</el-col>
        <el-col :span="8" class="table-cell">{{ course.nickname }}</el-col>
        <el-col :span="8" class="table-cell">{{ course.communityName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell-title">性别</el-col>
        <el-col :span="8" class="table-cell-title">密码</el-col>
        <el-col :span="8" class="table-cell-title">生日</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell">{{
          course.gender | genderFormat
        }}</el-col>
        <el-col :span="8" class="table-cell">{{ course.password }}</el-col>
        <el-col :span="8" class="table-cell">{{ course.birthday }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell-title">注册时间</el-col>
        <el-col :span="8" class="table-cell-title">类型</el-col>
        <el-col :span="8" class="table-cell-title">楼号</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell">{{ course.createTime }}</el-col>
        <el-col :span="8" class="table-cell">{{
          userType[course.userType]
        }}</el-col>
        <el-col :span="8" class="table-cell">{{ course.floor }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell-title">用户身份</el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="table-cell">{{
          course.userIdentity && userIdentityEmun[course.userIdentity]
        }}</el-col>
      </el-row>
      <!--      <el-row>-->
      <!--        <el-col :span="8" class="table-cell-title">审核状态</el-col>-->
      <!--        <el-col :span="8" class="table-cell-title" style="height:37px"></el-col>-->
      <!--        <el-col :span="8" class="table-cell-title" style="height:37px"></el-col>-->
      <!--      </el-row>-->
      <!--      <el-row>-->
      <!--        <el-col :span="8" class="table-cell">{{status[course.status]}}</el-col>-->
      <!--        <el-col :span="8" class="table-cell"></el-col>-->
      <!--        <el-col :span="8" class="table-cell"></el-col>-->
      <!--      </el-row>-->
    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">用户头像</span>
    </div>
    <img style="width: 100px; margin-top: 20px" :src="course.icon" />
    <el-row type="flex" justify="end" style="margin-top: 20px">
      <el-col :span="2">
        <el-button @click="back">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { siteDeptById } from "@/api/servDept";
import { getMenberById, auditById } from "@/api/memberLevel";
import { formatDate } from "@/utils/date";
export default {
  name: "CourseList",
  data () {
    return {
      userType: {
        "01": "服务学习类",
        "02": "学院类",
        "03": "服务、学院",
      },
      list1: {},
      course: {},
      list: null,
      total: null,
      listLoading: false,
      status: {
        0: "禁用",
        1: "启用",
      },
      userIdentityEmun: {
        '01': '居民',
        '02': '居委会',
        '03': '物业公司',
        '04': '业委会',
        '05': '物管会',
        '06': '管理员',
        '07': '供应商',
        '08': '政府组织',
        '09': '其他'
      },
    };
  },
  created () {
    getMenberById({ id: this.$route.query.id }).then((response) => {
      // console.log( this.$route.query.id)
      this.course = response.data;
      console.log(response.data);
      // var status1 = response.data.status
      // this.course.status_val = this.status[status1]
    });
    // auditById({ username: this.$route.query.username }).then(response => {
    //   // console.log( this.$route.query.id)
    //   this.list = response.data
    // })
  },
  filters: {
    genderFormat (value) {
      if (value === 1) {
        return "男";
      } else if (value === 2) {
        return "女";
      } else {
        return "未知";
      }
    },
    setAdrInfo (row) {
      // console.log(row);
      const { province, city, area } = row;
      if (province && city && province.indexOf("{") !== -1) {
        return `${JSON.parse(province).provName}-${JSON.parse(city).cityName}-${JSON.parse(area).countyName
          }`;
      } else {
        return "";
      }
    },
    formatCouerseType (typeList) {
      let type = "";
      typeList &&
        typeList.map((item, index) => {
          type = type + item.name + (typeList.length === index + 1 ? "" : "/");
        });
      return type;
    },
    formatDateTime (time) {
      if (time == null || time === "") {
        return "N/A";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  methods: {
    back () {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.app-container {
  width: 80%;
  margin: 20px auto;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}

.coursePic {
  margin-top: 20px;
  max-width: 100%;
}
</style>
